<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/zhuce.css">

</head>

<body>
    <div class="back">
        <img src="images\gugongh.jpg">
    </div>
    <div id=" login" class="login">
        <div id="title" class="login-title">注册
            <!-- <span><a id="closeBtn" href="javascript:void(0);" class="close-login">×</a></span> -->
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input1">

            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
                <p class="message">请输入6~16位密码</p>
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">注册</a>
        </div>
        <div class="zhuce"><a href="index.html">返回登陆</a></div>

    </div>
    <script>

        // //密码验证
        //1.获取元素
        var listiInput = document.querySelector('.list-input');
        var message = document.querySelector('.message');
        var loginButton = document.querySelector('.login-button');
        //2.注册事件
        listiInput.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';  //改变类名
                message.innerHTML = '您输入的位数不对';
                alert('请输入正确的密码');
            } else {
                message.className = 'message right';  //改变类名
                message.innerHTML = '正确输入';
                loginButton.onclick = function () {
                    alert('注册成功');
                    window.location.href = "";
                }
            }
        }
    </script>
</body>

</html>